<template>
  <div class="content-box">
    <nav-title title="银行账号信息" />
    
    <div class="line">
      <span class="important">*</span>
      <div class="label">开户银行名称</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="bankVal" :columns="bankLength" placeholder="请选择" v-model="bank.bankCd" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">分/支行</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="bank.rsBranchNm">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">银行账号</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="bank.accountEcId">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">账户名称</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="bank.accountName">
      </div>
    </div>
    <div class="submit-btn" @click="save">
      保存
    </div>
  </div>

</template>

<script>
import { Datetime, Group, PopupPicker } from 'vux'
import { getDicItem,saveBank,getBank,getQrmsg } from '../../../../api/api'
import { json2Form } from '../../../../util/http'

export default {

  name: 'input-information',
  components: {
    Datetime, Group, PopupPicker
  },
  mounted(){
    //获取字典
    this.getBanklb()
  },
  data() {
    return {
      bank:{
        rsHireId: 'T003346',
        countryCd: 'CHN',
      },
      bankVal:[],
      bankLength:1
    }
  },
  created() {
    this.getBanks()
  },
  methods: {

    //银行
    getBanklb() {
      getBank().then(res => {
        res.retData.forEach((val) => {
          this.bankVal.push({name: val.descrshort, value: val.bankCd})
        });
        this.bankLength = res.retData.length
      })
    },


    save() {
      this.bank.bankCd=this.bank.bankCd[0]
      console.log(this.bank)
      saveBank(json2Form(this.bank)).then(res => {
        // const that = this;
        // //成功：000000
        // if(res && res.retCode === '000000' ){
        //   //保存成功
        //   // 显示
        //   this.$vux.alert.show({
        //     title: '新城',
        //     content: '保存成功',
        //     onHide () {
        //       that.$router.push('/');
        //     }
        //   })
        console.log(res)

        }).catch (res=>{
        this.$vux.alert.show({
          title: '警告',
          content: '网络异常，请稍后重试'
        })
      })

    },
    getBanks() {
      if(this.$route.params.banklt){
        this.bank.bankCd = this.$route.params.banklt.bankCd
        this.bank.rsBranchNm = this.$route.params.banklt.rsBranchNm
        this.bank.accountEcId = this.$route.params.banklt.accountEcId
        this.bank.accountName = this.$route.params.banklt.accountName
        console.log('dddd')
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss">
.content-box {
  padding: 0 10px;
  .important {
    width: 10px;
    color: red;
  }

  .line {
    display: flex;
    border-bottom: 1px solid #cccccc;
    line-height: 40px;
    .label {
      flex: 2;
      text-align: left;
      font-size: 14px;
    }
    .value {
      flex: 3;
      font-size: 13px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      color: #707070;
      input {
        width: 100%;
        padding-left: 15px;
      }
    }
    // .controls-box {
    //   flex: 3;
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    .select-control {
      flex: 3;
      text-align: left;
    }
    .date-control {
      flex: 3;
      text-align: left;
    }
    // .select-box {
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    // .icon {
    //   flex: 1;
    //   text-align: right;
    // }
  }

  .submit-btn {
    position: absolute;
    bottom: 35px;
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }

  .remove-btn {
    position: absolute;
    bottom: 35px;
    background-color: #ff6633;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 55%;
    box-shadow: 3px 3px 5px #888888;
  }

  .title {
    font-size: 20px;
    font-weight: 900;
    color: #25262d;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}
</style>
